<template>
  <div>
    <div id="content" style="height: 1200px"></div>
  </div>
</template>

<script>
import china from "../../assets/china";
import echarts from "echarts";
import mapData from "../../assets/data";
import axios from "axios";
export default {
  data() {
    return {
      mapData,
      dataList: [],
      cityname: "",
      center: 0,
    };
  },
  destroyed() {
    clearInterval(this.id);
  },
  mounted() {
    this.getData();
    this.initeCharts();
  },
  methods: {
    initeCharts1(name, center) {
      axios.defaults.baseURL = "";
      axios.get("./guangxi.json").then((res) => {
        echarts.registerMap(name, res);
        echarts.init(document.getElementById("content")).dispose();
        var myChart = echarts.init(document.getElementById("content"));
        var option = {
          geo: {
            type: "map",
            map: name,
            zoom: 0.8,
            roam: true,
            label: {
              show: true,
            },
            center: center, // 这个坐标值, 我们是可以通过地图矢量数据获取到的
          },
        };
        myChart.setOption(option);
        // console.log(1)
        // this.initeCharts1('guangxi',res.features[0].properties.center)
      });
    },
    getData() {
      let res = this.mapData.data.list.map((item) => {
        // console.log(item);
        return {
          name: item.name,
          value: item.econNum,
        };
      });
      this.dataList = res;
    },
    initeCharts() {
      var myChart = echarts.init(document.getElementById("content"));
      var option = {
        tooltip: {
          //数据格式化
          formatter: function (params, callback) {
            return (
              params.seriesName + "<br />" + params.name + "：" + params.value
            );
          },
        },
        backgroundColor: "#013954",
        color: ["#ac6767", "#1d953f", "#ff3333", "#6950a1", "#918597"],
        visualMap: {
          min: 0,
          max: 10,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#e0ffff", "#FFCCD6", "#ff9933", "red"], //取值范围的颜色
          },
          show: true, //图注
        },
        series: [
          {
            type: "map",
            map: "china",
            data: this.dataList,
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("click", (params) => {
        axios.defaults.baseURL = "";
        axios.get("./guangxi.json").then((res) => {
          this.initeCharts1("guangxi", res.features[0].properties.center);
        });
        // axios.defaults.baseURL = ''
        // axios.get("./guangxi.json").then((res) => {
        //   echarts.registerMap('guangxi', res)
        //   var myChart = echarts.init(document.getElementById("content"));
        //   var option = {
        //   geo: {
        //   type: 'map',
        //   map: 'guangxi',
        //   zoom: 1.2,
        //   label: {
        //     show: true
        //   },
        //   center:[108.320004,22.82402]// 这个坐标值, 我们是可以通过地图矢量数据获取到的
        //   }
        //   }
        //   myChart.setOption(option)
        //   // console.log(1)
        //   // this.initeCharts1('guangxi',res.features[0].properties.center)
        // });
      });
    },
  },
};
</script>
